<template>
  <div :class="['object-edit', fullScreen ? 'full-screen' : '', useDyStyle ? 'use-dy-style' : '']">
    <div class="gis-container" ref="gisAppRef"></div>
    <div class="message-content">{{ messageText }}</div>
    <div class="search-wrap">
      <div class="search-content">
        <div class="search-label">地址搜索：</div
        ><n-auto-complete
          class="search-input"
          v-model:value="searchVal"
          :input-props="{
            autocomplete: 'disabled',
          }"
          :options="searchOption"
          :on-select="doSelect"
          placeholder="请输入地址"
        />
      </div>
    </div>
    <div class="btn-list">
      <n-button class="cancel btn" @click="doCancel">取消</n-button>
      <n-button class="reset btn" type="info" v-if="state === State.待保存" @click="doReset"
        >重置</n-button
      >
      <n-button class="edit btn" type="primary" v-if="state === State.查看" @click="doCreate"
        >编辑</n-button
      >
      <n-button class="save btn" type="primary" v-if="state === State.待保存" @click="doSave"
        >保存</n-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import useGis from './hooks/gis';
import useHooks, { State } from './hooks/index';
import { computed, onUnmounted, PropType, watch } from 'vue';
import { PlotType, PlotTypeEnum } from './type';
import useSearch from './hooks/search';
import { string } from 'vue-types';
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  properties: {
    type: Object,
    default: () => ({}),
  },
  /**区划编码 */
  areaCode: {
    type: String,
  },
  /**图形面积 */
  polyonArea: {
    type: [String, Number],
  },
  /**是否需要区划编码 */
  needAreaCode: {
    type: Boolean,
    default: true,
  },
  /**是否需要图形面积，只有多边形有效 */
  needPolyonArea: {
    type: Boolean,
    default: true,
  },
  type: {
    type: Number as PropType<PlotType>,
    default: PlotTypeEnum.POINT,
  },
  saveData: {
    type: Function,
  },
  fullScreen: {
    type: Boolean,
    default: false,
  },
  /**没得钱了，飞到你爸爸身边 */
  flyToObject: {
    type: [Array, Function] as PropType<any>,
  },
  /**没得事干，请的一帮兄弟 */
  otherObject: {
    type: [Array, Function] as PropType<any>,
  },
  /**编辑的时候存在 */
  id: {
    type: String,
    default: '',
  },
  /**是否使用带鱼版样式 */
  useDyStyle: {
    type: Boolean,
    default: true,
  },
  pluginClass: {
    type: String,
    require: true,
  },
  topAreaCode: {
    type: String,
  },
});

const emits = defineEmits([
  'update:modelValue',
  'cancel',
  'getAllData',
  'update:properties',
  'update:polyonArea',
  'update:areaCode',
]);

const { gisAppRef, customPlugin, isInit } = useGis(props.pluginClass || 'PluginYLYLH');
const { state, doCreate, doInit, doReset, doRemove, doSave, doCancel } = useHooks(
  customPlugin,
  props,
  emits
);

const { searchVal, searchOption, doSelect } = useSearch(customPlugin);
console.log(searchVal, searchOption, doSelect)

const messageMap = new Map([
  [PlotTypeEnum.POINT, '在地图上标记 一个点 然后保存'],
  [PlotTypeEnum.LINE, '在地图上画 一条线 然后保存'],
  [PlotTypeEnum.POLYGON, '在地图上 绘制一个面 然后保存'],
]);
const messageText = computed(() => messageMap.get(props.type) || '');

watch(
  () => isInit.value,
  () => {
    if (isInit.value) doInit();
  }
);

onUnmounted(() => {
  doRemove();
});
</script>

<style scoped lang="less">
.object-edit {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.gis-container {
  width: 100%;
  height: 100%;
}
.btn-list {
  position: absolute;
  bottom: 20px;
  right: 50%;
  transform: translateX(50%);
  .btn {
    margin: 0 5px;
  }
}
.message-content {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  color: #2115cc;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.search-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  padding-bottom: 20px;
  .search-label {
    font-size: 16px;
    white-space: nowrap;
  }
  .search-content {
    display: flex;
    align-items: center;
    color: #fff;
    width: 250px;
  }
}
.full-screen {
  .btn-list {
    bottom: 50px;
  }
  .search-wrap {
    left: 50px;
    top: 50px;
  }
  .message-content {
    top: 50px;
    right: 50px;
    font-size: 20px;
  }
}
.use-dy-style {
  .btn-list {
    bottom: -50px;
    right: 10px;
    transform: translateX(0);
  }
}
</style>
